<div class="group-wrapper" [formGroup]="parentForm">
  <h3>
    <fa-icon [icon]="['fas', 'book']" class="check"></fa-icon>
    Name
  </h3>
  <p>
    Specify the name of the Notebook Server and the Namespace it will belong to.
  </p>

  <div class="inputs-wrapper">
    <mat-form-field appearance="outline">
      <mat-label>Name</mat-label>
      <input
        matInput
        placeholder="Notebook Server's Name"
        formControlName="name"
        #name
      />
      <mat-error>{{ showNameError() }}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Namespace</mat-label>
      <input
        matInput
        placeholder="Name of Namespace"
        formControlName="namespace"
        readonly
      />
      <mat-error>You must enter a value</mat-error>
    </mat-form-field>
  </div>
</div>
